<template>
  <div class="minesettings">
    <div class="mines_tou">
      <p class="min_p1">
        <img class="img1" src="@/assets/fanhui.png">
        <span class="min_span1">重设密码</span>
      </p>
    </div>
    <P class="p1">
      <van-field
        v-model="sms"
        center
        clearable
        label-width="40"
        label-align="center"
        left-icon="shield-o"
        placeholder="请输入验证码"
        class="van_field"
        >
      </van-field>
    </P>
    <van-field
    v-model="sms"
    center
    clearable
    left-icon="shield-o，"
    placeholder="请输入验证码"
    class="van_field"
  >
    <template #button>
      <van-button size="small" type="primary" class="van_button">发送验证码</van-button>
    </template>
  </van-field>
  <button class="but1">下一步</button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "@vue/reactivity";
const sms=ref("")
</script>

<style scoped>
.p1{margin: 60px 0px 20px 0px;font-size: 16px;background-color: #fff;}
.van_button{background-color: #fbf9f6;border: 0;color: red;}
.but1{width: 350px;margin-left: 20px;height: 40px;border: 0;background-color: #ec7b67;color: #fff;margin: 20px 0px 20px 20px;}
.van_field{width: 350px;height: 40px;background-color: #fbf9f6;margin-left: 20px;}
.van_field:first{border-bottom:1px solid red;}
.minesettings{width: 390px;min-height: 800px;}
.mines_tou{width: 390px;height: 55px;line-height: 55px;border-bottom: 2px solid #f2f2f2;background-color: #ffff;}
.img1{width: 9px;height: 14px;vertical-align: middle;margin-left: 20px;}
.min_span1{vertical-align: middle;margin-left: 136px;font-size: 17px;}
.min_span2{vertical-align: middle;margin-left: 120px;color: red;font-size: 14px;}
.min_p1{vertical-align: middle}
</style>